<template>
  <div class="view-main">
    <div id="viewDiv"></div>
    <!-- 查询结果弹窗插槽 -->
    <QueryResult ref="queryResult">
      <template v-slot:content>
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="250"
          @row-click="TableRowClick"
        >
          <el-table-column
            fixed
            prop="objectid"
            label="ID"
            width="150"
          ></el-table-column>
          <el-table-column
            fixed
            prop="dlbm"
            label="地类编码"
            width="150"
          ></el-table-column>
          <el-table-column
            fixed
            prop="qsxzmc"
            label="权属性质名称"
            width="150"
          ></el-table-column>
          <el-table-column
            fixed
            prop="dlmc"
            label="地类名称"
            width="150"
          ></el-table-column>
          <el-table-column
            fixed
            prop="qsdwmc"
            label="权属单位名称"
            width="150"
          ></el-table-column>
          <el-table-column
            fixed
            prop="tbmj"
            label="面积"
            width="150"
          ></el-table-column>
          <el-table-column
            fixed
            prop="zzsxmc"
            label="种植类型"
            width="150"
          ></el-table-column>
        </el-table>
      </template>
    </QueryResult>

    <div id="infoDiv" class="esri-widget">
      <Legend :legendList="legendList"></Legend>
    </div>
    <tool ref="topTools" @handle="operateFeatureLayer" />
  </div>

  <el-dialog
    title="属性查询结果"
    :modal="false"
    width="400px"
    v-model="dialogResultVisible"
    destroy-on-close
    custom-class="dialogResult"
  >
    <el-tabs type="card">
      <el-tab-pane
        v-for="item in resultList"
        :key="item"
        :label="item.layerName"
      >
        <span v-if="item.results.length == 0">未找到相关数据</span>
        <el-descriptions
          boder="true"
          v-for="res in item.results"
          :key="res"
          :column="1"
          size="mini"
          v-else
        >
          <el-descriptions-item
            v-for="(val, key, i) in res"
            :key="i"
            :label="key"
            label-align="right"
            align="left"
            label-class-name="result-label"
            class-name="result-content"
            width="150px"
          >
            {{ val }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <!-- 分屏 -->
  <el-dialog
    v-model="dialogNormalVisible"
    top="0"
    destroy-on-close
    :fullscreen="true"
    center
    @opened="selectType('classType2', 2, 12)"
    title="分屏对比"
  >
    <el-container style="overflow: hidden">
      <el-header class="grid-content bg-purple">
        <el-button-group>
          <el-button :type="classType2" @click="selectType('classType2', 2, 12)"
            >二分屏</el-button
          >
          <el-button :type="classType4" @click="selectType('classType4', 4, 12)"
            >四分屏</el-button
          >
        </el-button-group>
      </el-header>
      <el-main style="overflow: hidden">
        <el-row class="el-row" :gutter="20">
          <el-col
            v-for="(n, index) in screenNum"
            :key="index"
            :xs="24"
            :sm="24"
            :md="cloNum"
            :lg="cloNum"
            :xl="cloNum"
            :class="screenClass"
          >
            <div class="player-wrapper" element-loading-background="#FFF">
              <div class="screen-main">
                <div class="screen-wrapper" :style="screenClass">
                  <div class="screen-map" :id="`screen${n}`"></div>
                  <el-select
                    v-model="screenSelectedLayer1"
                    placeholder="请选择图层"
                    class="screen-select"
                    @change="screenChange(screenSelectedLayer1, n)"
                    filterable
                    v-if="n == 1"
                  >
                    <el-option
                      v-for="item in allLayerList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="screenSelectedLayer2"
                    placeholder="请选择图层"
                    class="screen-select"
                    @change="screenChange(screenSelectedLayer2, n)"
                    filterable
                    v-if="n == 2"
                  >
                    <el-option
                      v-for="item in allLayerList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="screenSelectedLayer3"
                    placeholder="请选择图层"
                    class="screen-select"
                    @change="screenChange(screenSelectedLayer3, n)"
                    filterable
                    v-if="n == 3"
                  >
                    <el-option
                      v-for="item in allLayerList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="screenSelectedLayer4"
                    placeholder="请选择图层"
                    class="screen-select"
                    @change="screenChange(screenSelectedLayer4, n)"
                    filterable
                    v-if="n == 4"
                  >
                    <el-option
                      v-for="item in allLayerList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-dialog>
  <!-- 卷帘 -->
  <el-dialog
    v-model="dialogRollerVisible"
    top="0"
    destroy-on-close
    :fullscreen="true"
    center
    @opened="rollerInitMap()"
    title="卷帘对比"
  >
    <el-container style="overflow: hidden">
      <el-header style="margin-bottom: 15px">
        <el-row class="el-row" :gutter="20">
          <el-col :span="12">
            <el-select
              v-model="leftSelectedLayer"
              placeholder="请选择图层"
              class="screen-select"
              filterable
              @change="leftChanged"
            >
              <el-option
                v-for="item in allLayerList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              v-model="rightSelectedLayer"
              placeholder="请选择图层"
              class="screen-select"
              filterable
              @change="rightChanged"
            >
              <el-option
                v-for="item in allLayerList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="player-wrapper" element-loading-background="#FFF">
          <div class="screen-main">
            <div
              class="screen-wrapper"
              style="padding-bottom: 40%; position: relative; margin: 0px auto"
            >
              <div class="screen-map" id="screenRoller"></div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, nextTick, computed } from "vue";
import Legend from "@/components/legend/Legend.vue";
import Tool from "@/components/tool/Tool.vue";
import store from "@/store/index";
import Bus from "./func/Bus";

import {
  initMap,
  mapView,
  legendList,
  operateFeatureLayer,
  dialogResultVisible,
} from "./func";

import { FindTaskUtil } from "@/views/yizhangtu/func/findTaskSearch";
import {
  dialogNormalVisible,
  selectType,
  screenChange,
  classType2,
  classType4,
  screenNum,
  cloNum,
  screenClass,
  screenSelectedLayer1,
  screenSelectedLayer2,
  screenSelectedLayer3,
  screenSelectedLayer4,
  operateFeatureLayerList,
} from "./func"; //分屏显示
import {
  dialogRollerVisible,
  rollerInit,
  leftSelectedLayer,
  rightSelectedLayer,
  allLayerList,
  leftChanged,
  rightChanged,
} from "./func"; //卷帘
import { getAllLayerList } from "@/api/common";
import { ElMessage } from "element-plus";
import { config } from "@/config";

//查询结果弹窗
import QueryResult from "@/components/QueryResult/index.vue";
import { useStore } from "vuex";
import { log } from "console";

export default defineComponent({
  name: "Map",
  components: {
    Legend,
    Tool,
    QueryResult,
  },
  setup() {
    let store = useStore();
    let topTools: any = ref(null);
    const rollerInitMap = () => {
      let leftLayer = config.rollerLeftLayer;
      let rightLayer = config.rollerRightLayer;
      leftSelectedLayer.value = config.rollerLeftLayer.name;
      rightSelectedLayer.value = config.rollerRightLayer.name;
      rollerInit(leftLayer, rightLayer);
    };
    const resultList = computed(() => {
      return store.state.layers.resultList;
    });
    //查询结果组件引用
    const queryResult = ref();
    onMounted(() => {
      nextTick(() => {
        console.log("地图组件加载。。。");
        store.dispatch("layers/INIT_LAYER", []);
        initMap("viewDiv");
        //地图工具栏
        mapView.ui.add(topTools.value.$el, "top-right");
        // mapView.ui.add("infoDiv", "bottom-right");
      });
      Bus.$on("map-handle", (data: any) => {
        console.log(data,'data')
        operateFeatureLayer(data);
      });
      getApiData();
    });
    const getApiData = async () => {
      try {
        let result = await getAllLayerList();
        // console.log(result);
        if (result.status === 200) {
          let r = result.data.data;
          allLayerList.value = [];
          r.forEach((element: any) => {
            let o = {
              id: element.id,
              name: element.name,
              serviceUrl: element.serviceUrl,
              serviceType: element.serviceType, // 0 是瓦片  1是动态
            };
            allLayerList.value.push(o);
          });
        }
      } catch (error) {
        ElMessage.error("请求异常");
      }
    };

    //查询结果表格数据 WJW 2021-12-21
    const tableData = computed(() => {
      // 控制打开关闭查询结果面板
      const panelstate = store.getters["searchresult/getPanelState"];
      //由于面板在页面初始加载时为init状态，这里需要判断面板状态必须时true,false才可操作面板
      if (panelstate == "true") {
        queryResult.value.open();
      }
      if (panelstate == "false") {
        queryResult.value.close();
      }
      // 返回查询结果给变量，填充表格
      return store.getters["searchresult/getResultList"];
    });
    //查询结果表格点击事件，地图定位到点击数据对应的图斑
    const TableRowClick = (val: any) => {
      let thisRowDataId = val.objectid;
      const layerIds = [0];
      const searchFields = ["FID"];
      const layerURL =
        "http://10.10.24.31:6080/arcgis/rest/services/T_LYXZ/TD_LYXT_SDSJ_BZ_2019_WP/MapServer";
      const findres = new FindTaskUtil(
        mapView,
        layerURL,
        layerIds,
        searchFields,
        thisRowDataId
      );
      findres.SearchLocation("polyline");
    };
    return {
      topTools,
      legendList,
      operateFeatureLayer,
      dialogNormalVisible, //分屏显示
      selectType,
      screenChange,
      classType2,
      classType4,
      screenNum,
      cloNum,
      screenClass,
      screenSelectedLayer1,
      screenSelectedLayer2,
      screenSelectedLayer3,
      screenSelectedLayer4,
      operateFeatureLayerList,
      dialogRollerVisible,
      leftChanged,
      rightChanged,
      allLayerList,
      rollerInitMap,
      leftSelectedLayer,
      rightSelectedLayer,
      queryResult,
      dialogResultVisible,
      resultList,
      tableData,
      TableRowClick,
    };
  },
});
</script>

<style lang="less" scoped>
.view-main {
  height: 100%;
  background: #efefef;
}

#viewDiv {
  position: absolute;
  height: 100%;
  width: 100%;
}
#infoDiv {
  background-color: white;
  padding: 10px;
  max-height: 375px;
  overflow: auto;
}
:deep(.esri-ui-corner) {
  position: absolute;
  display: block;
}
:deep(.esri-expand) {
  margin-top: 10px;
  max-width: 32px;
}
:deep(.esri-component) {
  margin-top: 10px;
}
:deep(.esri-expand__content--expanded) {
  width: 300px;
  box-shadow: 0 0px !important;
}
:deep(.esri-view:fullscreen) {
  background-color: #efefef;
}
.player-wrapper {
  position: relative;
  /*padding-bottom: 8px;*/
}

.screen-main {
  position: relative;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 0.1px solid #0d84ff;
  // height: 600px;
}

.screen-map {
  position: absolute;
  height: 100%;
  width: 100%;
}

.screen-select {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}

:deep(.el-container) {
  margin: 0;
  padding: 0;
}
:deep(.el-header) {
  background-color: transparent;
  text-align: right;
  height: 50px;
  line-height: 50px;
}
:deep(.el-main) {
  position: relative;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 100%;
}
:deep(.el-descriptions__label:not(.is-bordered-label)) {
  margin-right: 0;
}
:deep(.el-descriptions--mini:not(.is-bordered) .el-descriptions__cell) {
  padding-bottom: 0;
}
</style>
<style>
.dialogResult {
  margin: 15vh 10px 50px auto;
  border-radius: 10px;
}
.dialogResult .el-tabs__content {
  height: 200px;
  overflow-y: auto;
}
.dialogResult table {
  background-color: #e0e9f7;
  margin-bottom: 5px;
}
.dialogResult table tr:nth-child(odd) {
  background-color: #cedef8;
}
.result-label {
  display: inline-block;
  width: 30%;
  /* background-color: #ccc; */
  padding: 3px 0;
}
.result-content {
  display: inline-block;
  width: 70%;
  /* background-color: #ececfc; */
  padding: 3px 0;
}
</style>
